import React, { PureComponent } from 'react';
// 引入样式
import './scss/fanopera.scss';
// 引入地址
import { webSite } from '../website.js';
// 引入axios
import Axios from 'axios';
// 引入框架
import { message } from 'antd';
// 引入路由
import { NavLink } from 'react-router-dom';
// 引入站位图
import LazyLd from './LazyLd/LazyLd';
export default class Fanopera extends PureComponent {
  constructor() {
    super()
    // 存放番剧的列表
    this.state = {
      list: []
    }
  }
  componentDidMount () {
    // 发送请求获取番剧列表
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getFanopera").then(err => {
      if (err.data.code === 'F0001') {
        this.setState({
          list: err.data.list
        })
      }
    }).catch(() => {
      message.error({ content: '网络差，无法获取番剧信息', className: 'bulletChatMessage' });
    })
  }
  render () {
    let { list } = this.state;
    return (
      <ul className='fanopera'>
        {
          list.length !== 0 ?
            list.map((list, index) => {
              return (
                <NavLink to={{ pathname: '/fanopera/play', state: list }} key={index}>
                  <li className='fanopera_li'>
                    <LazyLd src={list.fanUrl} />
                    <span>更新至第{JSON.parse(list.fanList).length}集</span>
                    <p>{list.fanName}</p>
                  </li>
                </NavLink>
              )
            })
            : ''
        }
      </ul>
    )
  }
}